<style lang="less">
  @import './styles/infor-card.less';
</style>
<style>
  .relative {
    position: relative;
  }

  .close-icon {
    position: absolute;
    right: 6px;
    bottom: 6px;
    color: red;
    font-size: 20px;
  }
</style>
<template>
  <Card :padding="0">
    <div class="infor-card-con" @click="clickFun()">
      <Col class="infor-card-icon-con" :style="{backgroundColor: color, color: 'white'}" span="8">
      <Row class="height-100 relative" type="flex" align="middle" justify="center">
        <Icon :type="iconType" :size="iconSize"></Icon>
        <Icon type="md-remove-circle" class="close-icon" v-if="showClose == true"/>
      </Row>
      </Col>
      <Col span="16" class="height-100">
      <Row type="flex" align="middle" justify="center" class="height-100">
        <count-up
          class="infor-card-count user-created-count"
          :id-name="idName"
          :end-val="endVal"
          :color="color"
          :countSize="countSize"
          :countWeight="countWeight"
        >
          <p class="infor-intro-text" slot="intro">{{ introText }}</p>
        </count-up>
      </Row>
      </Col>
    </div>
  </Card>
</template>

<script>
  import countUp from './countUp.vue';

  export default {
    name: 'inforCard',
    components: {
      countUp
    },
    props: {
      idName: String,
      endVal: Number,
      color: String,
      iconType: String,
      introText: String,
      countSize: {
        type: String,
        default: '30px'
      },
      countWeight: {
        type: Number,
        default: 700
      },
      iconSize: {
        type: Number,
        default: 40
      },
      showClose: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      clickFun: function () {
        var _this = this;
        _this.$emit('clickFunction', {});
      },
    }
  };
</script>

